<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据表格</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table id="demo"></table>
		<hr>
		
		<!-- 方法渲染 -->
		<!-- 准备容器（标签），设置id属性值 -->
		<table id="demo2"></table>
		
		<!-- 
			自动渲染
				1) 带有 class="layui-table" 的 <table> 标签。 
		​		2) 对标签设置属性 lay-data="" 用于配置一些基础参数 
		​		3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
		 -->
		 <!-- <table class="layui-table" lay-data="{url:'js/user.json',page:true}">
		   <thead>
		     <tr>
		       <th lay-data="{field:'id',width:100}">ID</th>
		       <th lay-data="{field:'username'}">用户名</th>
		       <th lay-data="{field:'sex', sort: true}">性别</th>
		     </tr>
		   </thead>
		 
		 
		 
		 <!-- 转换静态表格-->
		 <table lay-filter="demo">
		     <thead>
		         <tr>
		             <th lay-data="{field:'username', width:100}">昵称</th>
		             <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
		             <th lay-data="{field:'sign'}">签名</th>
		         </tr> 
		     </thead>
		     <tbody>
		         <tr>
		             <td>贤心1</td>
		             <td>66</td>
		             <td>人生就像是一场修行a</td>
		         </tr>
		     </tbody>
		 </table>
		
		
		
		<script type="text/javascript">
			// 加载table模块
			layui.use("table",function(){
				var table = layui.table;
				
				// 加载table实例
				/* table.render({
					elem:"#demo", // elem属性用来绑定容器的id属性值
					url:"js/user.json", // 数据接口
					cols:[[
						{field:'id',title:'用户编号',sort:true,width:120},
						{field:'username',title:'用户姓名',width:100},
						{field:'sex',title:'性别',width:100,sort:true},
						{field:'city',title:'城市',width:100},
						{field:'sign',title:'签名'}
					]],
				}); */
				
				/* 方法渲染 */
				// 执行渲染
				/* table.render({
					elem: '#demo2' // 指定原始表格元素选择器（推荐id选择器）
					,url: 'js/user.json' // 数据接口
					,height: 315 // 容器高度
					,page:true // 开启分页
					,cols: [[  // 设置表头
						{field: 'id', title: 'ID'}
						,{field: 'username', title: '用户名'}
						,{field: 'sex', title: '性别'}
					]]
				 }); */
				
				
				/* 转换静态table */
				// 转换静态表格
				table.init('demo', {
					height: 315 // 设置高度
					// 支持所有基础参数
				});
				
				
			});
			
			
		</script>
	</body>
</html>
